<template>
	<div>
		<el-card class="!border-none p-4" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				单据类型
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span>类型：</span>
						<el-radio-group v-model="radio" class="flex-1 ml-[10px]" >
							<el-radio label="1" size="large">采购付款单</el-radio>
						</el-radio-group>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none p-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				收款单
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">订单编号：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款类型：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款银行：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款账号：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款金额：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">同一订单编码第几次收款：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">收款公司名称：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">大写金额：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">付款抬头：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">多付金额：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">少付金额：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
				<el-col :span="7" class="ml-[50px]">
					<div class="main-color v-flex ">
						<span class="w-[120px] text-right">经办人：</span>
						<span class="v-wordBreak ml-[10px]">012010225</span>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="7">
					<div class="main-color v-flex">
						<span class="w-[120px] text-right">备注：</span>
						<span class="v-wordBreak ml-[10px]">开具发票</span>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none p-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				审核结算
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="5">
					<div class="main-color v-flex">
						<span>审核：</span>
						<el-radio-group v-model="radio" class="flex-1 ml-[10px]" >
							<el-radio label="1" size="large">结算</el-radio>
							<el-radio label="2" size="large">通过审核未付款</el-radio>
							<el-radio label="3" size="large">驳回</el-radio>
						</el-radio-group>
					</div>
				</el-col>
			</el-row>
			<!-- 结算显示 -->
			<div v-if="radio == 1">
				<el-row class="mt-[20px]">
					<el-col :span="5">
						<div class="main-color v-flex">
							<span>结算金额：</span>
							<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="5">
						<div class="main-color v-flex v-col-top">
							<span class="mr-[10px]">照片：</span>
							<el-upload class="avatar-uploader"
								action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
								:show-file-list="false" :on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload" :limit="5">
								<img v-if="imageUrl" :src="imageUrl" class="avatar" />
								<el-icon v-else class="avatar-uploader-icon">
									<Plus />
								</el-icon>
							</el-upload>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="5">
						<div class="main-color v-flex">
							<span>付款银行：</span>
							<el-select class="flex-1 ml-[10px]" multiple placeholder="请选择" >
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="5">
						<div class="main-color v-flex">
							<span>付款金额：</span>
							<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
						</div>
					</el-col>
				</el-row>
			</div>
			<!-- 结算显示 end-->
			<!-- 驳回 -->
			<el-row class="mt-[20px]" v-if="radio == 3">
				<el-col :span="5">
					<div class="main-color v-flex">
						<span>原因：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<!-- end -->
		</el-card>
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]" >
				<span>取消</span>
			</el-button>
			<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">
				<span>保存</span>
			</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	import type { UploadProps } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	const radio = ref('1')
	const options = ref<Array<any>>([
		{
			value: '1',
			label: 'Metos/Sandvik/Extec/Symons'
		}, 
	])
	const imageUrl = ref('')//图片上传
	const handleAvatarSuccess : UploadProps['onSuccess'] = (
		response,
		uploadFile
	) => {
		imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	}
	const beforeAvatarUpload : UploadProps['beforeUpload'] = (rawFile) => {
	
		return true
	}
</script>

<style scoped lang="scss">
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		text-align: center;
		background: #F7F7F7;
	}
</style>